	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>Document</title>
		<script src="../bower_components/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<aaa></aaa>
		</div>

		<template id="father">
			<p>{{msgFather}}</p>
			获取到子级数据:
			<span>{{childInfo}}</span> 
			<hr>

			<bbb @child="getChildMsg"></bbb>
		</template>

		<template id="child">
			<span>{{msgChild}}</span>

			<input type="button" value="send" @click="send">
		</template>

		<script>
			new Vue({
				el: "#box",
				data: {},
				components: {
					"aaa": {
						data: function() {
							return {
								msgFather: "我是父级组件数据",
								childInfo: 'kkk'
							}
						},
						template: "#father",
						methods: {
							getChildMsg: function(val) {
								console.log(val)
								this.childInfo = val;
							}
						},
						components: {
							"bbb": {
								data: function() {
									return {
										msgChild: "我是子级组件数据",
										msgChild2: "我是子组件数据2"
									}
								},
								template: "#child",
								methods: {
									send: function() {
										// 注意:$emit的第一个参数，不能出现大写，否则数据无法传输到父组件里去，并且不报错
										this.$emit("child",this.msgChild);
									}
								}
							}
						}
					}
				}
			});
		</script>
	</body>
	</html>